<template>
  <span class="mx-3" v-loading="loading">
    <el-tooltip content="开机" placement="top">
      <el-button
        @click="sendSet('start')"
        size="small"
        type="success"
        :icon="CircleCheck"
        circle
      />
    </el-tooltip>
    <el-tooltip content="关机" placement="top"
      ><el-button
        size="small"
        @click="sendSet('stop')"
        type="info"
        :icon="SwitchButton"
        circle
    /></el-tooltip>
    <el-tooltip content="重启" placement="top"
      ><el-button
        size="small"
        @click="sendSet('reboot')"
        type="warning"
        :icon="Refresh"
        circle
    /></el-tooltip>
    <el-tooltip content="删除" placement="top"
      ><el-button
        size="small"
        @click="sendSet('delete')"
        type="danger"
        :icon="Delete"
        circle
    /></el-tooltip>
  </span>
</template>

<script setup>
import {
  Refresh,
  SwitchButton,
  CircleCheck,
  Delete
} from "@element-plus/icons-vue";
import { startUserContainer } from "@/api";
import { ref } from "vue";
import { message } from "@/utils/message";

const props = defineProps({
  id: [String, Number]
});
const loading = ref(false);

// 启动容器
function sendSet(type = "start") {
  // loading.value = true;
  startUserContainer(type, props.id)
    .then(() => {
      if (res.data.code === 200) {
        message("操作成功", {
          type: "success"
        });
      }
      loading.value = false;
    })
    .catch(e => {
      message(e.response.data.description, {
        type: "error"
      });
      loading.value = false;
    });
}
</script>

<style lang="scss" scoped></style>
